<template>
  <div class="user-page">
    <!-- 顶部个人信息区域 -->
    <div class="user-header">
      <img src="../assets/返回.svg" alt="返回" class="back-image" style="width: 40px; height: 40px;" @click="handleBack">
      <div class="header-content">
        <div class="settings-icon">
          <i class="fas fa-cog"></i>
        </div>
        <div class="user-info">
          <div class="avatar-container">
            <!-- 动态显示头像 -->
            <img :src="userPic || defaultPic" alt="用户头像" class="user-avatar">
          </div>
          <h2 class="user-name">{{ username }}</h2>
          <p class="user-level">铂金会员</p>
        </div>
      </div>
    </div>

    <!-- 功能模块区域 -->
    <div class="function-grid">
      <div class="function-card">
        <img src="../assets/我的设备.svg" alt="我的设备" style="width: 50px; height: 50px;">
        <h3>我的设备</h3>
        <p>管理您的智能家居设备</p>
      </div>
      <div class="function-card">
        <img src="../assets/消息中心.svg" alt="消息中心" style="width: 50px; height: 50px;">
        <h3>消息中心</h3>
        <p>查看系统通知和提醒</p>
      </div>
      <div class="function-card">
        <img src="../assets/家庭管理.svg" alt="家庭管理" style="width: 50px; height: 50px;">
        <h3>家庭管理</h3>
        <p>设置家庭成员和权限</p>
      </div>
      <div class="function-card">
        <img src="../assets/帮助中心.svg" alt="帮助中心" style="width: 50px; height: 50px;">
        <h3>帮助中心</h3>
        <p>获取使用帮助和教程</p>
      </div>
    </div>

    <!-- 底部操作区域 -->
    <div class="action-list">
      <div class="action-item" @click="goToPersonalData">
        <div class="action-icon"><i class="fas fa-user"></i></div>
        <div class="action-text">个人资料设置</div>
        <div class="action-arrow"><i class="fas fa-chevron-right"></i></div>
      </div>
      <div class="action-item">
        <div class="action-icon"><i class="fas fa-shield-alt"></i></div>
        <div class="action-text">账号与安全</div>
        <div class="action-arrow"><i class="fas fa-chevron-right"></i></div>
      </div>
      <div class="action-item">
        <div class="action-icon"><i class="fas fa-lock"></i></div>
        <div class="action-text">隐私设置</div>
        <div class="action-arrow"><i class="fas fa-chevron-right"></i></div>
      </div>
      <div class="action-item">
        <div class="action-icon"><i class="fas fa-info-circle"></i></div>
        <div class="action-text">关于我们</div>
        <div class="action-arrow"><i class="fas fa-chevron-right"></i></div>
      </div>
      <!-- 注销用户 -->
      <div class="action-item" @click="showLogoutDialog = true">
        <div class="action-icon"><i class="fas fa-info-circle"></i></div>
        <div class="action-text" style="color: red;">注销用户</div>
        <div class="action-arrow"><i class="fas fa-chevron-right"></i></div>
      </div>
    </div>

    <!-- 注销弹窗 -->
    <div v-if="showLogoutDialog" class="modal-overlay">
      <div class="modal">
        <h3>确认注销</h3>
        <p>请输入您的手机号进行确认：</p>
        <input v-model="logoutPhone" placeholder="请输入手机号" class="input-box" />
        <div class="modal-actions">
          <button @click="confirmLogout" class="confirm-btn">确定</button>
          <button @click="showLogoutDialog = false" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const userPic = ref('');
const username = ref('');
const defaultPic = 'https://ai-public.mastergo.com/ai/img_res/default-avatar.jpg';
const showLogoutDialog = ref(false);
const logoutPhone = ref('');

const handleBack = () => {
  router.push({ name: 'Home' });
};

const goToPersonalData = () => {
  router.push({ name: 'PersonalData' });
};

const confirmLogout = async () => {
  if (!logoutPhone.value) {
    alert('请输入手机号');
    return;
  }

  try {
    const response = await axios.post('http://localhost:8080/api/auth/delete-user', {
      phone: logoutPhone.value
    });

    if (response.data.code === 200) {
      alert('注销成功');
      localStorage.removeItem('loggedInPhone');
      router.push({ name: 'Login' });
    } else {
      alert('注销失败：' + response.data.msg);
    }
  } catch (error) {
    console.error('注销失败', error);
    alert('注销请求失败');
  } finally {
    showLogoutDialog.value = false;
  }
};

onMounted(async () => {
  const loggedInPhone = localStorage.getItem('loggedInPhone');
  if (loggedInPhone) {
    try {
      const nameRes = await axios.get(`http://localhost:8080/api/auth/username-by-phone?phone=${loggedInPhone}`);
      username.value = nameRes.data;

      const avatarRes = await axios.get(`http://localhost:8080/api/auth/avatar?phone=${loggedInPhone}`);
      if (avatarRes.data.code === 200) {
        userPic.value = avatarRes.data.data;
      } else {
        console.warn('未能获取头像，使用默认头像');
      }

    } catch (error: any) {
      console.error('获取用户信息失败', error);
    }
  }
});
</script>

<style scoped>
@import '../assets/css/Myself.css';
</style>
